<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <title>用户分析</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
	<div class="table">
		<div class="layui-search">
			<div class="layui-form">
				<div class="layui-form-item">
					<div class="layui-inline">
			            <label class="layui-form-label">性别：</label>
			            <div class="layui-input-inline">
			              <input type="text" name="sex" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			            </div>
			        </div>
			        <div class="layui-inline">
			            <label class="layui-form-label">签名：</label>
			            <div class="layui-input-inline">
			              <input type="text" name="sign" placeholder="请输入" autocomplete="off" class="layui-input">
			            </div>
			        </div>
			        <div class="layui-inline">
			            <label class="layui-form-label">评分：</label>
			            <div class="layui-input-inline">
			              <input type="text" name="score" placeholder="请输入" autocomplete="off" class="layui-input">
			            </div>
			        </div>
				</div>
				<div class="layui-form-item">
			        <div class="layui-inline">
			            <label class="layui-form-label">开始日期：</label>
			            <div class="layui-input-inline">
			               <input type="text" name="startDate" class="layui-input" id="startDate">
			            </div>
			        </div>
			        <div class="layui-inline">
			            <label class="layui-form-label">结束日期：</label>
			            <div class="layui-input-inline">
			               <input type="text" name="endDate" class="layui-input" id="endDate">
			            </div>
			        </div>
			        <div class="layui-inline">
			            <label class="layui-form-label">城市：</label>
			            <div class="layui-input-inline">
				            <select name="city">
								<option value="">请选择一个城市</option>
								<option value="010">北京</option>
								<option value="021">上海</option>
								<option value="0571">杭州</option>
							</select>     
			            </div>
			        </div>
			        <div class="layui-inline">
			            <button class="layui-btn" lay-submit="" lay-filter="search">
			              <i class="layui-icon layui-icon-search"></i>
			            </button>
			        </div>
				</div>
			</div>
		</div>
		<div class="tool">
		  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
		  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
		  <button class="layui-btn" data-type="isAll">验证是否全选</button>
		</div>
		<table id="table" lay-filter="table"></table>
		<script type="text/html" id="bar">
		  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	</div>
	<script type="text/javascript" src="./layui/layui.js"></script>
	<script>
		layui.use(['jquery','table','form','laydate'], function(){
			var $=layui.jquery,table=layui.table,form=layui.form,laydate=layui.laydate;
			//执行一个laydate实例
			laydate.render({
			    elem: '#startDate' //指定元素
			});
			laydate.render({
			    elem: '#endDate' //指定元素
			});
			// 搜索
			form.on('submit(search)',function(data){
				table.reload('table',{
					where:{
						key: {
				            id: 10000
				        }
					}
				});
			});
			//第一个表格实例
			table.render({
				elem: '#table',
				height: 415,
				url: 'table.json', //数据接口
				page: true, //开启分页,
				limit:30,
				response: {
					statusName: 'code', //数据状态的字段名称，默认：code
					statusCode: 0, //成功的状态码，默认：0
					msgName: 'msg', //状态信息的字段名称，默认：msg
					countName: 'count', //数据总数的字段名称，默认：count
					dataName: 'rows' //数据列表的字段名称，默认：data
				},
				cols: [[ //表头
					{type:'checkbox'},
					{field: 'id', title: 'ID', width:80, sort: true},
					{field: 'username', title: '用户名', width:80},
					{field: 'sex', title: '性别', width:80, sort: true},
					{field: 'city', title: '城市', width:80}, 
					{field: 'sign', title: '签名（可编辑）', width: 177,edit: 'text'},
					{field: 'experience', title: '积分', width: 80, sort: true},
					{field: 'score', title: '评分', width: 80, sort: true},
					{field: 'classify', title: '职业', width: 80},
					{field: 'wealth', title: '财富', width: 135, sort: true},
					{toolbar: '#bar',fixed:'right',width:200,align:'center'}
				]]
			});
			var active = {
			    getCheckData: function(){ //获取选中数据
			      var checkStatus = table.checkStatus('table')
			      ,data = checkStatus.data;
			      data.length!=0 && layer.alert(JSON.stringify(data)) || layer.msg('请选中一行');
			    }
			    ,getCheckLength: function(){ //获取选中数目
			      var checkStatus = table.checkStatus('table')
			      ,data = checkStatus.data;
			      layer.msg('选中了：'+ data.length + ' 个');
			    }
			    ,isAll: function(){ //验证是否全选
			      var checkStatus = table.checkStatus('table');
			      layer.msg(checkStatus.isAll ? '全选': '未全选')
			    }
			};
			$('.tool .layui-btn').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			});
			//监听工具条
			table.on('tool(table)', function(obj){
			    var data = obj.data;
			    if(obj.event === 'detail'){
			      layer.msg('ID：'+ data.id + ' 的查看操作');
			    } else if(obj.event === 'del'){
			      layer.confirm('真的删除行么', function(index){
			        obj.del();
			        layer.close(index);
			      });
			    } else if(obj.event === 'edit'){
			      	layer.open({
				        type: 2
				        ,title: '编辑数据'
				        ,content: 'listform.html'
				        ,maxmin: true
				        ,area: ['500px', '350px']
				        ,btn: ['确定', '取消']
				        ,yes: function(index, layero){
				        	//点击确认触发 iframe 内容中的按钮提交
				            var submit = layero.find('iframe').contents().find("#listform-submit");
				            var iframeWin = window[layero.find('iframe')[0]['name']];
				            var listform = layero.find('iframe').contents();
				        		sex=listform.find("input[name=sex]").val();
				        		sign=listform.find("input[name=sign]").val();
				        		score=listform.find("input[name=score]").val();
				        		if(sex!='' && sign!='' && score!=''){
				        			var update=obj.update({
							          sex: sex,
							          sign:sign,
							          score:score
							        });
						            iframeWin.formSub();
				        		}
				        		submit.click();
				        }
			        }); 
			    }
			});
		});
	</script> 
</body>
</html>